<template>
  <div class="add-goods">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }">商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加商品</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="form">
      <el-form :model="goodsForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="类目选择" prop="category">
          <el-button type="primary" @click="dialogVisible = true">类目选择</el-button>
          <span> {{ goodsForm.category }} </span>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="goodsForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <el-button type="primary" @click="dialogVisibleImg = true">上传图片</el-button>
          <img :src=goodsForm.image alt="" height="200px">
        </el-form-item>
        <el-form-item label="商品描述" prop="descs">
          <wangEditor @sendEditor="sendEditor" ref="myEditor"></wangEditor>
        </el-form-item>

        <el-form-item label="规格参数配置" v-show="isShow">
          <el-form ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
            <el-form-item v-for="(item, index) in list" :label="item.title" :key="index"
              :prop="item.value">
                <el-input v-model="item.value"></el-input>

              <el-form-item v-for="(ele, i) in item.children" :label="ele.title " :key="i" :prop="ele.value">
                  <el-input v-model="ele.title"></el-input>
              </el-form-item>

            </el-form-item>
          </el-form>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 类目选择 -->
    <el-dialog title="类目选择" :visible.sync="dialogVisible" width="40%">
      <Tree @sendTree="sendTree"></Tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showTreeData">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 上传图片 -->
    <el-dialog title="上传图片" :visible.sync="dialogVisibleImg" width="40%">
      <UploadImg @sengImg="sengImg"></UploadImg>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleImg = false">取 消</el-button>
        <el-button type="primary" @click="showImg">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Tree from './Tree.vue'
import UploadImg from './uploadImg.vue'
import wangEditor from './wangEditor.vue'
export default {
  components: {
    Tree, UploadImg, wangEditor
  },
  data() {
    return {
      treeData: {},
      imgUrl: '',
      goodsForm: {
        name: '',
        price: '',
        num: '',
        sellPoint: '',
        image: '',
        descs: '',
        category: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入视频名称', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        date2: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        type: [
          { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      dialogVisibleImg: false,
      isShow: false,
      list:[]
    };
  },
  methods: {
    sendTree(value) {
      this.treeData = value
    },
    showTreeData() {
      this.dialogVisible = false
      this.goodsForm.category = this.treeData.name

      this.isShow = true
    },
    sengImg(value) {
      this.goodsForm.image = value
    },
    showImg() {
      console.log(123);

      this.dialogVisibleImg = false
    },
    sendEditor(value) {
      this.goodsForm.descs = value
    },
    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.goodsForm);
          //发请求
          // if(result.code === 1){

          // }
          this.$refs.ruleForm.resetFields()
          this.$refs.myEditor.editor.txt.clear()
          this.list = []
          this.isShow = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.add-goods {
  margin: 10px;
}

.title {
  padding: 10px;
  background: #fff;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

.form {
  background: #fff;
  padding: 10px;
}
</style>
